// 场景（Scene）
// 在Three.js中添加的物体都是添加到场景中的，因此它相当于一个大容器。一般说，场景里没有很复杂的操作，在程序最开始的时候进行实例化，然后将物体添加到场景中即可。
var scene = new THREE.Scene();

/**
 * 定义了一个透视投影的照相机：WebGL和Three.js使用的坐标系是右手坐标系
 * 0~180度  眼睛视角度数
 * 宽高比例
 * 像素值 最近距离
 * 像素值 最远距离
 */
var camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    1,
    1000);
camera.position.set(0, 0, 5);
// 照相机也需要被添加到场景中
scene.add(camera);

// renderer
var renderer = new THREE.WebGLRenderer(
    // {
    //     canvas: document.getElementById('mainCanvas')
    // }
);
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('app').appendChild(renderer.domElement);

/**
 * 几何形状
 * width, height, depth, widthSegments, heightSegments, depthSegments
 */
var geometry = new THREE.BoxGeometry(10, 10, 10)
var material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    opacity: 0.75
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
camera.position.z = 20;
camera.position.y = 0;

renderer.render(scene, camera)

function animate() {
    window.requestAnimationFrame(animate);
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.01;
    renderer.render(scene, camera)
}
animate()